<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="物流详情">
    </el-page-header>
    <div class="logisticContainer">
      <div class="baseInfo">
        <span>物流单号: {{ invoiceNo }} </span>
        <span>快递名称: {{ getExpressName() }} </span>
      </div>
      <div class="steps" v-if="logisticList.length > 0">
        <el-steps direction="vertical"  :active=cActive space="100px" >
          <el-step :title="item.title" :description="item.ftime" icon="el-icon-circle-check" v-for="(item, index) in logisticList" @key="index"></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
  import * as orderInfoService from "@/api/orderInfo/orderInfo"
  export default {
    name: "logisticDetail",
    components: {
    },
    components: {
    },
    data() {
      return {
        finish: 'finish',
        wait: 'wait',
        logisticList: [],
        logisticCompanies: [], // 物流公司列表
        loading: false,
        cActive: 1,
        invoiceNo: this.$route.params.invoiceNo,
        expressName: this.$route.params.expressName
      }
    },
    computed: {
    },
    mounted() {
    },
    methods: {
      getExpressName() {
        const that = this;
        let expressName = '';
        if (that.logisticCompanies.length>0) {
          that.logisticCompanies.forEach(function(item) {
            console.log(item);
            if (item.dictValue === that.expressName) {
              expressName = item.dictLabel;
            }
          })
        }
        return expressName;
      },
      getDetail() {
        if (!this.invoiceNo) {
          this.$message.error('物流单号不能为空！')
          this.goBack()
        }
        if (!this.expressName) {
          this.$message.error('物流公司不能为空！')
          this.goBack()
        }
        this.$webGlobal.startLoading()
        orderInfoService.expressInfo(this.invoiceNo, this.expressName).then((res) => {
          console.log('物流详情res：');
          console.log(res);
          if (res && res.code && res.code === 200) {
            if (res.data.status == '200') {
              if (res.data.data) {
                var arr = res.data.data
                var response = []
                arr.forEach(item => {
                  var obj = {}
                  obj.title = item.context
                  obj.ftime = item.ftime
                  response.push(obj)
                })
                console.log('查看logisticList：')
                console.log(response)
                this.logisticList = response
              } else {
                let msg = '获取详情失败！'
                if (res.data.message) {
                  msg = res.data.message
                }
                this.$message.error(msg)
              }
            } else {
              let msg = '获取详情失败！'
              if (res.data.message) {
                msg = res.data.message
              }
              this.$message.error(msg)
            }
          } else {
            let msg = '获取详情失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('获取详情失败！')
        })
      },
      goBack() {
        this.$router.go(-1)
      }
    },
    created() {
      // console.log(this.$route.params.invoiceNo)
      // console.log(this.$route.params.expressName)
      this.getDicts("LOGISTICS_COMPANIES").then(response => {
        this.logisticCompanies = response.data;
        console.log('物流公司列表:');
        console.log(this.logisticCompanies);
      });
      this.getDetail();
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
.logisticContainer{
  padding:20px;
  font-size:14px;
  .baseInfo{
    display: flex;
    align-items: center;
    span{
      margin-right:20px;
    }
  }
  .steps{
    padding:20px 30px;
  }
  .el-step__head.is-wait{
    color: #C0C4CC;
    .el-step__icon{
      background: #C0C4CC;
      border-radius: 50%;
    }
  }
}

</style>
